<script setup>

import {onMounted, ref} from "vue";
import {ElMessage} from "element-plus";
import {useStore} from "vuex";
import OCRCom from "@/components/common/OCRCom.vue";

 const store = useStore()
  /*
  参数传递
   */
  onMounted(()=>{
    makeDisplayProps(props.xuanzeParams)
  })
  //填充空白问题
  const makeDisplayProps = (xuanzeParams)=>{
    const nullNum = xuanzeParams.quesNum - xuanzeParams.ques.length
    if (nullNum === 0){
      displayProps.value = xuanzeParams
    }else if (nullNum > 0){
      let tmpProps = xuanzeParams
      for (let i = 0; i < nullNum; i++){
        tmpProps.ques.push({
          id: null,
          category: "单项选择",
          problem: null,
          answer: null,
          sonProID: null,
          score: "displayProps.value.quesScore",
          choiceNum: 4,
          teacherID: "store.getters.getUserId",
          star: null,
          choice1: null,
          choice2: null,
          choice3: null,
          choice4: null,
          content: null,
          sonExercise: null,
          public: false,
          single: true
        })
        displayProps.value = tmpProps
      }
    }else if (nullNum < 0){
      displayProps.value = xuanzeParams
      displayProps.value.ques.splice(nullNum)
    }
    console.log(displayProps.value)
  }
  const props = defineProps({
    xuanzeParams: JSON
  })
  const displayProps = ref({
    quesNum: 5,
    quesScore: 2,
    ques: [
      {
        id: 4,
        category: "单项选择",
        problem: "We feel quite sad about\ndeath of Yuan Longping,“Father of Hybrid Rice\". What\ngreat loss it is!\n",
        answer: "B",
        sonProID: "",
        score: 0,
        choiceNum: 3,
        teacherID: 0,
        star: 0,
        choice1: "A. the; /",
        choice2: "B.a; the",
        choice3: "C.a; the",
        choice4: "D.a; the",
        content: null,
        sonExercise: null,
        public: false,
        single: true
      },
      {
        id: 8,
        category: "单项选择",
        problem: "We feel quite sad about\ndeath of Yuan Longping,“Father of Hybrid Rice\". What\ngreat loss it is!\n",
        answer: "B",
        sonProID: "",
        score: 0,
        choiceNum: 3,
        teacherID: 0,
        star: 0,
        choice1: "A. the; /",
        choice2: "B.a; the",
        choice3: "C.a; the",
        choice4: "D.a; the",
        content: null,
        sonExercise: null,
        public: false,
        single: true
      },
      {
        id: 4,
        category: "单项选择",
        problem: "We feel quite sad about\ndeath of Yuan Longping,“Father of Hybrid Rice\". What\ngreat loss it is!\n",
        answer: "B",
        sonProID: "",
        score: 0,
        choiceNum: 3,
        teacherID: 0,
        star: 0,
        choice1: "A. the; /",
        choice2: "B.a; the",
        choice3: "C.a; the",
        choice4: "D.a; the",
        content: null,
        sonExercise: null,
        public: false,
        single: true
      },
      {
        id: 8,
        category: "单项选择",
        problem: "We feel quite sad about\ndeath of Yuan Longping,“Father of Hybrid Rice\". What\ngreat loss it is!\n",
        answer: "B",
        sonProID: "",
        score: 0,
        choiceNum: 3,
        teacherID: 0,
        star: 0,
        choice1: "A. the; /",
        choice2: "B.a; the",
        choice3: "C.a; the",
        choice4: "D.a; the",
        content: null,
        sonExercise: null,
        public: false,
        single: true
      },
      {
        id: 4,
        category: "单项选择",
        problem: "We feel quite sad about\ndeath of Yuan Longping,“Father of Hybrid Rice\". What\ngreat loss it is!\n",
        answer: "B",
        sonProID: "",
        score: 0,
        choiceNum: 3,
        teacherID: 0,
        star: 0,
        choice1: "A. the; /",
        choice2: "B.a; the",
        choice3: "C.a; the",
        choice4: "D.a; the",
        content: null,
        sonExercise: null,
        public: false,
        single: true
      },
      {
        id: 8,
        category: "单项选择",
        problem: "We feel quite sad about\ndeath of Yuan Longping,“Father of Hybrid Rice\". What\ngreat loss it is!\n",
        answer: "B",
        sonProID: "",
        score: 0,
        choiceNum: 3,
        teacherID: 0,
        star: 0,
        choice1: "A. the; /",
        choice2: "B.a; the",
        choice3: "C.a; the",
        choice4: "D.a; the",
        content: null,
        sonExercise: null,
        public: false,
        single: true
      }
    ]
  })
  const emit = defineEmits()
  const updateXuanzeParams = () => {
    emit('update:xuanzeParams', displayProps);
    ElMessage({
      type: 'success',
      message: '习题组配置成功，请使用"题目设置"上传具体题目'
    })
  };
</script>

<template v-if="loadDone">
  <div class="gradint-background com-container">
    <!--习题参数与确定按钮-->
    <div class="params-container">
      <div class="param-self">
        <h4>单项选择</h4>
      </div>
      <div class="param-self">
        题目数量：{{displayProps.ques.length}} / {{ displayProps.quesNum }}
      </div>
      <div class="param-self">
        每题分值：{{ displayProps.quesScore }}
      </div>
      <div class="param-self">
        总分值：{{ displayProps.ques.length *  displayProps.quesScore}}
      </div>
      <div style="flex: 1"/>
      <div>
        <el-button>批量上传题目</el-button>
        <el-button>一键智能组卷</el-button>
        <el-button type="primary">确定</el-button>
      </div>
    </div>
    <!--习题设置-->
    <div class="ques-container">
      <div v-for="i in displayProps.quesNum" class="ques-line">
        <div class="line-line">
          <h4>第{{ i }}题：</h4>
          <OCRCom/>
        </div>
        <div class="line-line">
          题目：
          <el-input
              v-if="displayProps.ques[i-1]"
              v-model="displayProps.ques[i-1].problem"
              style="width: calc(100% - 120px)"
              :autosize="{ minRows: 2, maxRows: 4 }"
              type="textarea"
              placeholder="请输入或识别题目"
          />
        </div>
        <div class="line-line" style="align-items: center">
          A选项：
          <el-input
              v-if="displayProps.ques[i-1]"
              v-model="displayProps.ques[i-1].choice1"
              style="width: calc(100% - 120px)"
              placeholder="请输入或识别选项"
          />
        </div>
        <div class="line-line" style="align-items: center">
          B选项：
          <el-input
              v-if="displayProps.ques[i-1]"
              v-model="displayProps.ques[i-1].choice2"
              style="width: calc(100% - 120px)"
              placeholder="请输入或识别选项"
          />
        </div>
        <div class="line-line" style="align-items: center">
          C选项：
          <el-input
              v-if="displayProps.ques[i-1]"
              v-model="displayProps.ques[i-1].choice3"
              style="width: calc(100% - 120px)"
              placeholder="请输入或识别选项"
          />
        </div>
        <div class="line-line" style="align-items: center">
          D选项：
          <el-input
              v-if="displayProps.ques[i-1]"
              v-model="displayProps.ques[i-1].choice4"
              style="width: calc(100% - 120px)"
              placeholder="请输入或识别选项"
          />
        </div>
        <div class="line-line" style="align-items: center">
          答案：
          <el-input
              v-if="displayProps.ques[i-1]"
              v-model="displayProps.ques[i-1].answer"
              style="width: calc(100% - 120px)"
              placeholder="请输入或识别选项"
          />
        </div>
        <el-divider/>
      </div>
    </div>
  </div>
</template>

<style scoped>
  .com-container{
    position: relative;
  }
  /*习题参数与确定*/
  .params-container{
    position: absolute;
    top: 12px;
    left: 12px;
    right: 12px;
    padding: 12px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    animation: top-in .6s 1;
  }
  .param-self{
    margin-right: 32px;
  }
  /*习题设置*/
  .ques-container{
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    top: 80px;
    padding: 12px;
    width: calc(100% - 48px);
    flex: 1;
    border-top: #ccc 1px solid;
    overflow-x: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    animation: bottom-in .6s 1;
  }
  .ques-line{
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin: 12px 0;
  }
  .line-line{
    margin: 8px 12px;
    display: flex;
    justify-content: space-between;

  }
  .line-line4{
    margin: 8px 12px;
    justify-content: space-between;
    display: flex;
    flex-direction: column;
  }
  .line-line4 div{
    display: flex;
    justify-content: space-between;
    margin: 4px 0;
    align-items: center;
  }

</style>